<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <!-- logo -->
        <span class="icon1">
          <img src="../../img/原型图_slices/组 105.png" alt="" />
          <span>开心乐</span>
        </span>

        <!-- 头像 -->
        <div class="touxiang">
          <span class="touxiang_1">
            <img src="../../img/原型图_slices/矢量智能对象.png" alt="" />
          </span>
          <span class="touxiang_2">
            <el-avatar
              src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
            />
          </span>
          <span class="touxiang_3">1232</span>
          <span class="touxiang_4">
            <img src="../../img/原型图_slices/多边形 1.png" alt="" />
          </span>
        </div>
      </el-header>

      <el-container>
        <!-- 侧边栏 -->
        <el-aside width="280px">
          <!-- 组件引入 -->
          <el-menu
            default-active="1"
            class="el-menu-vertical-demo"
            background-color="transparent"
            :router="true"
          >
            <!-- 首页 -->
            <el-sub-menu index="1">
              <template #title>
                <el-icon>
                  <House size="16px" />
                </el-icon>

                <span>首页</span>
              </template>
              <el-menu-item index="/Home/yhsj">用户数据</el-menu-item>
              <el-menu-item index="/Home/szbyy">直播运营</el-menu-item>
            </el-sub-menu>

            <!-- 系统管理 -->
            <el-sub-menu index="2">
              <template #title>
                <el-icon>
                  <Setting />
                </el-icon>
                <span>系统设置</span>
              </template>
              <el-menu-item index="/Home/ggxx">公告信息</el-menu-item>
              <el-menu-item index="/Home/nrxg">内容修改</el-menu-item>

            </el-sub-menu>

            <!-- 用户管理 -->
            <el-sub-menu index="3">
              <template #title>
                <el-icon>
                  <User />
                </el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/Home/zbdt">主播动态</el-menu-item>
              <el-menu-item index="/Home/yzbyy">直播小组</el-menu-item>
              <el-menu-item index="/Home/fpsj">复盘数据</el-menu-item>
            </el-sub-menu>

            <!-- 主播管理 -->
            <el-sub-menu index="4">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>主播管理</span>
              </template>
              <el-menu-item index="/Home/zblb">主播列表</el-menu-item>
            </el-sub-menu>

            <!-- 直播管理 -->
            <el-sub-menu index="5">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>直播管理</span>
              </template>
              <el-menu-item index="/Home/zbsz">直播设置</el-menu-item>

            </el-sub-menu>

            <!-- 财务管理 -->
            <el-sub-menu index="6">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>财务管理</span>
              </template>
              <el-menu-item index="/Home/cwzk">财务总况</el-menu-item>
            </el-sub-menu>


            <el-sub-menu index="7">
              <template #title>
                <el-icon>
                  <location />
                </el-icon>
                <span>订单中心</span>
              </template>
              <el-menu-item index="/Home/spkc">商品库存</el-menu-item>
              <el-menu-item index="/Home/xjfz">新建分组</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>

        <!-- 主体 -->
        <el-main flex="auto">
          <RouterView></RouterView>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup></script>

<style lang="less" scoped>
.common-layout {
  height: 100%;
}

.el-container {
  width: 100%;
  height: 100%;
}
.el-header {
  width: 100%;
  height: 64px;
  background: #8b68ff;
  background: #8b68ff;

  position: relative;

  .icon1 {
    width: 160px;
    height: 100%;
    position: absolute;
    left: 78px;

    span {
      position: absolute;
      top: 11px;
      right: 0;

      font-size: 28px;
      color: #f7f7f7;
      color: #f7f7f7;
      font-weight: 600;
    }

    img {
      position: absolute;
      top: 11px;

      width: 160px;
      height: 43px;
      color: #f7f7f7;
      color: #f7f7f7;
    }
  }

  // 头像

  .touxiang {
    position: absolute;
    top: 0;
    right: 16px;
    height: 100%;

    .touxiang_1 {
      width: 16px;
      height: 16px;
      line-height: 64px;
    }

    .touxiang_2 {
      width: 48px;
      height: 48px;
      line-height: 64px;
    }

    .touxiang_3 {
      font-size: 14px;
      color: #f7f7f7;
      color: #f7f7f7;
    }

    .touxiang_4 img {
      width: 14px;
      height: 12px;
    }
  }
}

// 侧边栏

.el-aside {
  height: 100%;

  border-radius: 10px;
}
</style>

